Preparation Before Installing - Blogger Theme Tutorial Series - Part 1

This is first part of Blogger Theme Tutorial Series. This series will cover preparation, installation, and customization tutorial for Blogger or Blogspot Blog. I hope it will provide more clear and up to date guide for themes that i share in this blog.

Lets start the tutorial. 

PART 1: PREPARATION

1. Backing up Old Theme (IMPORTANT)

Important !
It’s very important to back up old theme and it’s widgets before installing or modifying anything so you can restore them anytime. 

To back up old theme, first please log in to your blogger account :

1. Click "Theme" on the left menu
2. Click 

   

   liitle triangle
   

   liitle triangle beside "CUZTOMIZE" button
   
3. After the popup menu showing, click "Backup"
4. Save the XML file on your computer 

Example 1 : Backing up Old Theme
Click the picture to enlarge

Example 2 : Backing up Old Theme
Click the picture to enlarge

2. Backing up Old Gadgets

NOTE:  Your Old HTML/JavaScript gadgets and Image Gadgets can affect new Theme, So we need to back up the Old HTML/JavaScript gadgets and Image Gadgets (before removing them), so you can restore them later

Backing up Image Gadgets 

To back up Image gadget is simple:

1. visit your live blog 
2. Right-click on your image that you want to back up 
3. Choose "Save Image As" 
4. Save it to your computer 
5. Repeat the steps for another images if necessary

Example 1 : Backing up Old Gadgets
Click the picture to enlarge

Backing up HTML/JavaScript Gadgets 

To back up HTML/JavaScript gadget:

1. Click "Layout" on the left menu
2. Decide gadget/widget that you want to backup
3. On the gadget, Click Pencil icon
   
4. After the popup window showing, select (block) Javascript or HTML that you want to backup,then Copy it
5. Open any plain text editor app (e.g. Notepad, TextEdit)
6. Paste it into the text editor app, then save the file on your computer.
7. Repeat the steps for another gadget. 

Example 2 : Backing up Old Gadgets
Click the picture to enlarge

Example 3 : Backing up Old Gadgets
Click the picture to enlarge

Example 4 : Backing up Old Gadgets
Click the picture to enlarge

3. Remove Old Gadgets

NOTE : Your Old HTML/JavaScript gadgets and Image Gadgets can affect new Theme, So please remove Old HTML/JavaScript gadgets and Image Gadgets before installing new theme, but backup them first. 

to backup the gadgets, please see previous section here: Backup Old Gadgets .

To remove a gadget:

1. Click "Layout" on the left menu
2. Decide gadget/widget that you want to remove
3. On the gadget, Click  Pencil icon
4. After the popup window showing, "Remove" button
5. Repeat the steps for another gadget. 

Example 1 : Remove Old Gadgets
Click the picture to enlarge

Example 2 : Remove Old Gadgets
Click the picture to enlarge

Click Here to continue to PART 2: Installing Theme